<template>
  <el-main class="bg edit_wrap score_edit_wrap">
    <el-form ref="formRules" :model="form" status-icon label-width="70px">
      <el-row class="row_e">
        <el-col :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
          <div class="title_margin" style="margin-bottom: 20px" v-if="form.score_state === 1">
            已评分，得分：<span style="color: red">{{ form.score }}</span>
          </div>
        </el-col>
        <el-col v-for="(o, i) in question_list" :xs="24" :sm="24" :lg="24" class="el_form_item_warp" :key='i'>
          <div class="title_margin" v-if="o.type === '单选题'">
            {{
              o.question_order +
              ".单选题：" +
              o.title +
              " (" +
              o.score +
              "分)"
            }}
            <span class="score_show">--------{{ answer_scores[i] }}分</span>
          </div>
          <div class="title_margin" v-else-if="o.type === '多选题'">
            {{
              o.question_order +
              ".多选题：" +
              o.title +
              " (" +
              o.score +
              "分)"
            }}
            <span class="score_show">--------{{ answer_scores[i] }}分</span>
          </div>
          <div class="title_margin" v-else-if="o.type === '判断题'">
            {{
              o.question_order +
              ".判断题：" +
              o.title +
              " (" +
              o.score +
              "分)"
            }}
            <span class="score_show">--------{{ answer_scores[i] }}分</span>
          </div>
          <div class="title_margin" v-else-if="o.type === '填空题'">
            {{
              o.question_order +
              ".填空题：" +
              o.title +
              " (" +
              o.score +
              "分)"
            }}
            <span class="give_score" v-if="!if_scored">评分
              <el-input-number v-model="answer_scores[i]"> </el-input-number>
              分
            </span>
            <span class="score_show" v-else>--------{{ answer_scores[i] }}分</span>
          </div>
          <div class="title_margin" v-else>
            {{
              o.question_order +
              ".主观题：" +
              o.title +
              " (" +
              o.score +
              "分)"
            }}
            <span class="give_score" v-if="!if_scored">评分
              <el-input-number v-model="answer_scores[i]"> </el-input-number>
              分
            </span>
            <span class="score_show" v-else>--------{{ answer_scores[i] }}分</span>
          </div>
          <el-form-item v-if="o.type === '单选题'" label="">
            <el-radio :disabled="true" v-for="(q, o) in get_question_list(o.question_item)" v-model="answers[i]"
              :key='o' :label="q">{{ q }}</el-radio>
            <div v-if="if_scored && reference_answers[i]">
              参考答案：{{ reference_answers[i] }}
            </div>
          </el-form-item>
          <el-form-item v-else-if="o.type === '多选题'" label="">
            <el-checkbox-group :disabled="true" v-model="answers[i]">
              <el-checkbox v-for="(q, k) in get_question_list(o.question_item)" :label="q" :value="q"
                :key='k'></el-checkbox>
            </el-checkbox-group>
            <div v-if="if_scored && reference_answers[i]">
              参考答案：{{ reference_answers[i] }}
            </div>
          </el-form-item>
          <el-form-item v-else-if="o.type === '判断题'" label="">
            <el-radio :disabled="true" v-for="(q, v) in get_question_list(o.question_item)" v-model="answers[i]"
              :key='v' :label="q">{{ q }}</el-radio>
            <div v-if="if_scored && reference_answers[i]">
              参考答案：{{ reference_answers[i] }}
            </div>
          </el-form-item>
          <el-form-item v-else-if="o.type === '填空题'" label="">
            <el-input :disabled="true" style="width: 500px" v-model="answers[i]"></el-input>
            <div v-if="if_scored">参考答案：{{ reference_answers[i] }}</div>
          </el-form-item>
          <el-form-item v-else label="">
            <el-input :disabled="true" type="textarea" v-model="answers[i]">
            </el-input>
            <div v-if="if_scored">参考答案：{{ reference_answers[i] }}</div>
          </el-form-item>
        </el-col>

        <el-col :xs="24" :sm="24" :lg="24" class="el_form_item_warp">
          <el-form-item label="提交人">
            <el-input :disabled="true" v-model="submit_user_str"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="footer">
      <el-button v-if="!if_scored" type="primary" @click="submit_main" size="large">提交</el-button>
      <el-button @click="cancel()" size="large">取消</el-button>
    </div>
  </el-main>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { ref, onMounted, reactive } from "vue";
import { $post, $get } from "@/api/Api.js";
import storageHelper from "@/libs/StorageHelper";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  $get_auth,
  func,
  paramsFun,
  $fullUrl,
  formatDate,
  $banseUrl,
  $check_action,
  $getUrlParams,
  filterSensitiveWords,
} from "@/utils/utils.js";
let router = useRouter();
let store = useStore();
let token = storageHelper.getToken() || null;
let UserInfo = storageHelper.getUserInfo();
let user_answer_id = $getUrlParams().user_answer_id;
let user_group = storageHelper.getGroupValue();
let user_id = storageHelper.getUserInfo().user_id;
let url_get_question_list = ref("/api/exam_question/get_list");
let url_set = ref("/api/user_answer/set");
let url_get_obj = ref("/api/user_answer/get_obj");
let title = ref("user_answer");
let field = ref("user_answer_id");
let question_list = ref([]);
let answers = ref([]);
let submit_user_str = ref('');
let reference_answers = ref([]);
let answer_scores = ref([]);
let if_scored = ref(false);
let formRules = ref(null)
let form = reactive({
  user_answer_id: 0,
  user_id: 0,
  exam_id: 0,
  score: 0,
  score_state: 0,
  answers: [],
  score_detail: [],
  objective_score: 0,
  subjective_score: 0,
  nickname: "",
});
let ruleFormRef = ref(null);
// 点击取消
let cancel = () => {
  router.go(-1);
};
// 点击提交
let submit_main = () => {
  console.log(form.answers)
  console.log(form.score_detail)
  console.log(answer_scores.value)
  form.answers = JSON.stringify(form.answers);
  for (let i = 0; i < answer_scores.value.length; i++) {
    if (
      question_list.value[i].type === "填空题" ||
      question_list.value[i].type === "主观题"
    ) {
      if (form.score_detail[i]) {
        form.score_detail[i].score = answer_scores.value[i];

      } else {
        form.score_detail.push({
          score: answer_scores.value[i]
        })
      }
      form.subjective_score =
        parseFloat(form.subjective_score) +
        parseFloat(answer_scores.value[i]);
    }
  }
  form.score =
    parseFloat(form.subjective_score) +
    parseFloat(form.objective_score);
  form.score_state = 1;
  form.score_detail = JSON.stringify(form.score_detail);
  let url = url_set.value + "?user_answer_id=" + user_answer_id;
  $post(url, form).then((json, status) => {
    console.log("提交结果：", json);
    if (json.result) {
      submit_after();
      //_this.events("submit_after", json, null);
    } else if (json.error) {
      ElMessage.error(json.error.message);
    }
  });
};

// 获取科目列表
let get_obj_after = async () => {
  if (form.score_state === 1) {
    if_scored.value = true;
  }
  let formObj = Object.assign({}, form)
  let userJson = await $get("/api/user/get_obj?user_id=" + formObj.user_id);
  if (userJson.result) {
    submit_user_str.value = userJson.result.obj.nickname;
    formObj.user_id = userJson.result.obj.user_id;
    formObj.nickname = userJson.result.obj.nickname;
  } else if (userJson.error) {
    console.error(userJson.error);
  }


  let json = await $get(
    url_get_question_list.value + "?exam_id=" + formObj.exam_id
  );
  if (json.result) {
    question_list.value = json.result.list;
    for (let i = 0; i < question_list.value.length; i++) {
      if (question_list.value[i].type === "多选题") {
        answers.value[i] = [];
      } else {
        answers.value[i] = "";
      }
    }
  } else if (json.error) {
    console.error(json.error);
  }

  formObj.answers = JSON.parse(formObj.answers);
  formObj.score_detail = JSON.parse(formObj.score_detail);
  for (let i = 0; i < formObj.answers.length; i++) {
    answers.value[i] = formObj.answers[i].answer;
    answer_scores.value[i] = formObj.score_detail[i].score;
    if (
      question_list.value[i].type === "单选题" ||
      question_list.value[i].type === "判断题" ||
      question_list.value[i].type === "多选题"
    ) {
      if (answer_scores.value[i] !== question_list.value[i].score) {
        reference_answers.value[i] = question_list.value[i].answer;
      }
    } else {
      reference_answers.value[i] = question_list.value[i].answer;
    }
  }
  // 将普通对象的内容赋值给Proxy对象
  for (let key in formObj) {
    if (formObj.hasOwnProperty(key)) {
      form[key] = formObj[key];
    }
  }
  // form = formObj;
};
let get_question_list = (question_str) => {
  let question_listStr = question_str.split("\n");
  return question_listStr;
};
let submit_after = (json, func) => {
  ElMessage.success("提交成功！");
  ///this.$toast('提交成功！', 'success');
  router.push("./score_table?exam_id=" + form.exam_id);
};
// 获取详情
let get_exams_obj = async () => {
  let list = await $get(
    "/api/user_answer/get_obj?user_answer_id=" + user_answer_id
  );
  form = list.result.obj;
  get_obj_after(list.result.obj);
};
onMounted(() => {
  get_exams_obj();
});
</script>
<style scoped lang="less">
.title_margin {
  margin-left: 70px;
}

.give_score {
  margin-left: 50px;
}

.countdown span {
  color: red;
}

.score_show {
  margin-left: 20px;
  color: red;
}

.footer {
  text-align: center;
}
</style>
